<template>
  <div class="add-free-time">
    <!-- 班次 -->
    <a-row type="flex" class="mg_b20">
      <a-col class="ta-right title pd_r20 " :span="3">
        <span style="color: red">*</span>
        班次</a-col
      >
      <a-col :span="21">
        <a-button @click="addShifts">添加</a-button>
        <a-row v-for="(item, index) in attendShiftList" :key="index" class="mg_t10" type="flex" align="middle">
          <a-col :span="4">{{ item.name }}</a-col>
          <a-col v-for="(items, index) in item.attendPeriodList" :key="index" class="mg_r10">
            {{ moment(items.startPeriod).format("HH:mm") }} -
            {{ moment(items.endPeriod).format("HH:mm") }}
          </a-col>
          <a-col class="mg_l_o">
            <span @click="editorShifts(item)" class="tc-theme cursor">
              编辑 |
            </span>
            <a-popconfirm title="确定删除?" okText="确定" cancelText="取消" @confirm="deleteItem(item, attendShiftList)">
              <span class="cursor">删除</span>
            </a-popconfirm>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
    <!-- 周期 -->
    <a-row type="flex" class="mg_b20">
      <a-col class="ta-right title pd_r20" :span="3"> 排班周期</a-col>
      <a-col :span="21">
        <a-button @click="addCardTime">添加</a-button>
        <a-row v-for="(item, i) in attendCycleList" :key="i" class="mg_t10" type="flex" align="middle">
          <a-col :span="2">{{ item.cycleName }}</a-col>
          <a-col
            >{{ item.cycleDays.length }}天为周期:
            <span v-for="(inItem, index) in item.cycleDays" :key="index">
              {{ inItem.shiftName }}
            </span>
          </a-col>

          <a-col class="mg_l_o">
            <span @click="editorCardTime(item)" class="tc-theme cursor">
              编辑 |
            </span>
            <a-popconfirm title="确定删除?" okText="确定" cancelText="取消" @confirm="deleteCardTime(item, attendCycleList)">
              <span class="cursor">删除</span>
            </a-popconfirm>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
    <!-- 排班设置 -->
    <a-row type="flex">
      <a-col class="ta-right title pd_r20 " :span="3">
        <span style="color: red">*</span>
        排班设置
      </a-col>
      <a-col :span="21">
        <div class="set"></div>
      </a-col>
    </a-row>
    <!-- 完成 -->
    <a-row type="flex" class="mg_t20">
      <a-col :span="3"></a-col>
      <a-col>
        <a-row>
          <a-button type="primary" @click="editorSave">完成</a-button>
          <a-button @click="freeCard.addFreeCard = false">取消</a-button>
        </a-row>
      </a-col>
    </a-row>
    <!-- 班次 -->
    <editor-shifts :shiftsOptions="shiftsOptions"></editor-shifts>
    <!-- 排班周期 -->
    <chech-card-time :chechCardTimeOptions="chechCardTimeOptions"></chech-card-time>
  </div>
</template>

<script>
import { Check, EditorRules } from "@/api/check";
import editorShifts from "./editor-shifts";
import chechCardTime from "./check-card-time";
export default {
  name: "AddFreeTime",
  components: {
    editorShifts,
    chechCardTime
  },
  props: {
    freeCard: {}
  },
  data() {
    return {
      /* 判断是否编辑/添加 */
      editorType: false,
      /* 班次条件 */
      shiftsOptions: {},
      /* 排班周期条件 */
      chechCardTimeOptions: {},
      // 周期天数
      /*  cycleDay: {
         cycleName: '三班倒',//周期名称
         cycleDays: [{
           daysName: '第1天',//第几天
           shiftName: '休息'//班次名称
         }]
       }, */
      editorData: {
        attendCycleList: [],
        attendShiftList: [],
        attendStaffScheduleList: []
      }
    };
  },

  computed: {
    attendCycleList() {
      return this.editorData.attendCycleList;
    },
    attendShiftList() {
      return this.editorData.attendShiftList;
    }
  },
  methods: {
    /*  添加班次 */
    addShifts() {
      this.shiftsOptions = {
        show: true,
        editorType: false,
        obj: {}
      };
    },
    /* 编辑班次 */
    editorShifts(item) {
      this.shiftsOptions = {
        show: true,
        editorType: true,
        obj: item
      };
    },
    /* 删除 */
    deleteItem(item, arr) {
      arr.find((val, i, arrs) => {
        val.name === item.name ? arrs.splice(i, 1) : null;
      });
    },
    /* 添加排班周期 */
    addCardTime() {
      this.chechCardTimeOptions = {
        show: true,
        editorType: false
      };
    },
    /* 编辑周期 */
    editorCardTime(item) {
      this.chechCardTimeOptions = {
        show: true,
        editorType: true,
        obj: item
      };
    },
    /* 删除周期 */
    deleteCardTime(item, arr) {
      arr.find((val, i, arrs) => {
        val.name === item.name ? arrs.splice(i, 1) : null;
      });
    },
    /* 完成 */
    editorSave() {
      this.freeCard.addFreeCard = !this.freeCard.addFreeCard;
      this.editorData.attendStaffScheduleList = [...this.freeCard.deptList, ...this.freeCard.staffList];
      /* {
          empInfoName: '',//人员姓名
          shiftName: '',//shiftName
          yearMonthDay: ''//年月日
        } */

      Check({
        url: EditorRules.postAttend,
        data: this.editorData,
        method: "POST"
      }).then(data => (data.success ? this.$notification["success"]({ message: "新增成功" }) : null));
    }
  }
};
</script>
<style lang="scss" scoped>
.add-free-time {
  background: #fff;
  min-height: calc(100vh - 100px);
  background: linear-gradient(#dce4ef, #fcfcfe, #fdfdfd);
  padding: 20px;
  .title {
    line-height: 32px;
  }
  .set {
    border: 1px solid #ccc;
    min-height: 100px;
  }
}
</style>
